<template>
  <div style="margin: 0 auto">
    <!--  上中下-->
    <el-container style="width:1200px ;margin: 0 auto;height: auto">
      <!--文章详情内容 -->
      <el-main>
        <div >
          <!-- 标题 -->
          <p style="font-size: 40px;font-weight: bold;margin-bottom: 1px;">{{ tableData.title }} </p>
          <!-- 时间 -->
          <div style="text-align: left;margin-top: 10px;margin-bottom: -20px;margin-left: 10px">
            <b style="font-size: 14px;text-align:right;color: #404040">浏览量:&nbsp; {{tableData.viewCount}}</b>
          </div>
          <div style="text-align: right">

            <b style="font-size: 12px;text-align:right;color: #636363">发布时间:&nbsp; {{tableData.gmtModified}}</b>
          </div>
          <hr>
          <!-- 文章详情 -->
          <p v-html =" tableData.content"></p>
          <el-button round icon="el-icon-edit" style="margin-bottom: 10px"
                     @click="openEditDialog()">发表评论</el-button>
          <el-collapse @change="handleChange">
            <el-collapse-item title="评论区" name="1">
              <el-table :data="commentTable" border:false style="width: 100%">
                <el-table-column prop="username" label="用户名" width="120" header-align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="comment" label="评论内容" header-align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>

          <el-dialog title="编辑评论" :visible.sync="dialogFormVisible">
            <el-form :model="editForm">
              <el-form-item label="评论" >
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="editForm.comment">
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitEditForm()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-main>
      <!--下部分页列表-->
      <el-divider></el-divider>
      <el-footer style="height: auto;text-align: center">
        <a style="margin-left: 10px;text-decoration: none;color: #1a1a1a" href="javascript:void(0);"@click="setDisplay">
          <span style="text-align: center;font-size: 20px;font-weight: bold" ></span></a>
      </el-footer>
      <!--底部-->

    </el-container>
  </div>
</template>

<script>

export default {

  data() {
    return {
      commentTable:[],
      tableData: [],
      textarea1:'',
      show:true,
      activeIndex2: "",
      dialogFormVisible: false,
      editForm:{
        comment:'',
        usercode:'',
        articleId:''
      },
      articleId:'',
    }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    setDisplay:function () {
      this.show=true;
    },
    setHide:function () {
      this.show=false;
    },
    /*获取单选框选中的值*/
    getValue(index) {
      console.log(index);
    },
    //接收传递
    loadArticleList() {
      //接受上级页面传来的id参数
      this.articleId = this.$route.query.id;
      console.log(this.$route)
      console.log("文章id:"+this.articleId)
      let url = 'http://localhost:10001/articles/front/'+ this.articleId ;
      console.log('url = ' + url);

      this.axios
          .get(url).then((response) => {
        let responseBody = response.data;
        this.tableData = responseBody.data;
        console.log("文章标题:"+this.tableData.title)
      });
    },
    openEditDialog(){
      this.editForm.articleId=this.articleId;
      this.dialogFormVisible=true;
      this.editForm.usercode=localStorage.getItem('usercode');
    },
    submitEditForm(){
      console.log("id"+this.editForm.articleId);
      console.log("comment"+this.editForm.comment);
      let url = 'http://localhost:10001/comments/insert';
      let form = this.qs.stringify(this.editForm);
      this.axios.post(url,form).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            showClose: true,
            message: '评论成功!',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loadCommentList();
        } else {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadCommentList();
            }
          });
        }
      });
    },
    loadCommentList(){
      let url = 'http://localhost:10001/comments/'+this.articleId+'/front';
      console.log("commemturl"+url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.commentTable = responseBody.data;
      });
    }
  },
  created() {

  },
  mounted() {
    this.loadArticleList();
    this.loadCommentList();
  }
}
</script>

<style>

a{
  text-decoration: none;/*无下划线*/
}
.el-header a{
  text-decoration: none;/*无下划线*/
  font-size: 24px;
  color: #333334;
}
.user {
  text-decoration: none; /*无下划线*/
  font-size: 24px;
  color: #333334;
  display: block;
  margin-top: 17px;
  margin-right: 15px;
}

.butten {
  height: 30px;
  display: flex; /*设置为弹性容器*/
  align-items: center; /*定义div1的元素垂直居中*/
  justify-content: center; /*定义div1的里的元素水平居中*/
  margin-top: 20px;
  margin-bottom: 1px;

}

.butten a {
  text-decoration: none; /*无下划线*/
  font-size: 16px;
  color: #b3b3b3;


}

.tilte span {
  line-height: 2;
  font-size: 20px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 1; /*显示1行*/
  -webkit-box-orient: vertical; /*让子元素竖着排*/
  overflow: hidden;
}

.el-input-number.is-controls-right .el-input-number__increase{
  line-height: 25px;

}
.el-input-number.is-controls-right .el-input-number__decrease{
  line-height: 25px;

}


.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
  color: #333334;
}
.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
  color: #333334;
}

{
  display: block;
  resize: vertical;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  color: #606266;
  background-color: #FFF;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}


</style>
